﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This demonstration shows how to use the jqxSplitter API." />
    <title id='Description'>This demonstration shows how to use the jqxSplitter API.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var theme = getTheme();

             $('#mainSplitter').jqxSplitter({ theme: theme, panels: [{ size: 200 }, { size: 200 }, { size: 200}] });
             $('#expandFirstButton').jqxButton({ theme: theme, width: 90 });
             $('#expandLastButton').jqxButton({ theme: theme, width: 90 });
             $('#collapseFirstButton').jqxButton({ theme: theme, width: 95 });
             $('#collapseLastButton').jqxButton({ theme: theme, width: 95 });
             $('#enableButton').jqxButton({ theme: theme, width: 80 });
             $('#disableButton').jqxButton({ theme: theme, width: 80 });
             $('#orientationButton').jqxButton({ theme: theme, width: 90 });

             $('#expandFirstButton').click(function () {
                 $('#mainSplitter').jqxSplitter('expandAt', 0);
             });
             $('#expandLastButton').click(function () {
                 $('#mainSplitter').jqxSplitter('expandAt', 2);
             });
             $('#collapseFirstButton').click(function () {
                 $('#mainSplitter').jqxSplitter('collapseAt', 0);
             });
             $('#collapseLastButton').click(function () {
                 $('#mainSplitter').jqxSplitter('collapseAt', 2);
             });
             $('#enableButton').click(function () {
                 $('#mainSplitter').jqxSplitter('enable');
             });
             $('#disableButton').click(function () {
                 $('#mainSplitter').jqxSplitter('disable');
             });
             $('#orientationButton').click(function () {
                 var currentOrientation = $('#mainSplitter').jqxSplitter('orientation');
                 if (currentOrientation === 'vertical') {
                     $('#mainSplitter').jqxSplitter('orientation', 'horizontal');
                 } else {
                     $('#mainSplitter').jqxSplitter('orientation', 'vertical');
                 }
             });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container" style="float: left;">
            <input type="button" style='margin-top: 5px;' value="Orientation" id="orientationButton" />
            <input type="button" style='margin-top: 5px;' value="Expand first" id="expandFirstButton" />
            <input type="button" style='margin-top: 5px;' value="Expand last" id="expandLastButton" />
            <input type="button" style='margin-top: 5px;' value="Collapse first" id="collapseFirstButton" />
            <input type="button" style='margin-top: 5px;' value="Collapse last" id="collapseLastButton" />
            <input type="button" style='margin-top: 5px;' value="Enable" id="enableButton" />
            <input type="button" style='margin-top: 5px;' value="Disable" id="disableButton" />
            <br /><br />
            <div id="mainSplitter" style="width: 600px; height: 480px; border: 1px solid #ccc;">
                <div class="splitter-panel" style="background-color:#F5FFF2;"></div>
                <div class="splitter-panel" style="background-color:#EBF1FF;"></div>
                <div class="splitter-panel" style="background-color:#F5FFF2;"></div>
            </div>
        </div>     
    </div>
</body>
</html>